<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<%@ include file="/common/meta.jsp"%>
	<script type="text/javascript" src="${ctx}/js/utils/swfupload/swfupload.js"></script>
	<title>汪星客 - 个人中心 - 照片管理</title>
</head>
<body>
<div class="wrap">
	<div class="header_bg">
		<div class="header box">
            <%@ include file="/common/header.jsp"%>
        </div>
    </div>
    <div class="w">
    	<div class="path box">
            <jsp:include page="/common/frame/frame_path.jsp">
           		<jsp:param name="current" value="照片管理"/>
           	</jsp:include>
        </div>
    </div>
    <div class="main">
    	<div class="list box">
        	<div class="pc_left">
            	<jsp:include page="/common/frame/frame_left.jsp">
            		<jsp:param name="checked" value="photo"/>
            	</jsp:include>
            </div>
            <div class="pc_right">
                <dl class="pc_m">
                	<div class="photo bor_bot">
                    	<h2 class="font_s">旅店展示照片</h2>
                        <ul class="photo_list" id="photo_list">
                        	<c:forEach items="${photoList}" var="photo">
							<li photoId="${photo.id}">
                            	<p class="imgbox">
                            		<img src="${ctx}/tools/download.do?dir=PHOTO&fileName=${photo.photoPath}" width="216" height="144"/>
                            	</p>
								<p class="p_font">
<%--                                 	<span class="photo_name" title="${photo.photoTitle}">${photo.photoTitle}</span><br/> --%>
<%--                                 	<a href="javascript:tendog.win.photoEdit('${photo.id}')">编辑</a> --%>
									<a href="javascript:deletePhoto('${photo.id}')">删除照片</a>
                                </p>
                            </li>
                        	</c:forEach>
                        	<li id="photo_upload_li">
                            	<p><span id="frame_photo_upload_button"></span></p>
                            </li>
                        </ul>
                    </div>
                    <div class="photo" style="display: none;">
                    	<h2 class="font_s">相册管理</h2>
                        <ul class="photo_list" id="album_list">
                        	<c:forEach items="${albumList}" var="album">
                        	<li albumId="${album.id}">
                            	<p class="photo_bg" onclick="tools.href('${ctx}/photo/photos.do?id=${album.id}')">
                            		<img src="${ctx}/tools/download.do?dir=PHOTO&fileName=${album.albumCoverPath}" width="170" height="110"/>
                            	</p>
                                <p class="p_font">
                                	<span class="photo_name" title="${album.albumName}">${album.albumName}</span><br />
                                	<a href="javascript:tendog.win.albumEdit('${album.id}')">修改名称</a> <a href="javascript:deletealbum('${album.id}')">删除</a>
                                </p>
                            </li>
                            </c:forEach>
                            <li id="album_append_li">
                            	<p class="photo_bg" onclick="tendog.win.albumEdit()">
                            		<img src="${ctx}/images/photo_add.jpg" />
                            	</p>
                            </li>
                        </ul>
                    </div>
                </dl>
            </div>
            <div class="clear"></div>
		</div>
    </div>
    <div class="footer_bg">
    	<%@ include file="/common/footer.jsp"%>
    </div>
</div>
</body>
<script type="text/javascript">
function getPhotoHtml($li, photo) {
	var $p = $("<p></p>").addClass("imgbox");
	var $img = $("<img  width='216' height='144'/>").attr("src", "${ctx}/tools/download.do?dir=PHOTO&fileName=" + photo.photoPath);
	$li.attr("photoId", photo.id).append($p.append($img));
	$img.imgAuto();
	var $titleP = $("<p class='p_font'></p>")
	//.append("<span class='photo_name'>" + photo.photoTitle + "</span>")
	//.append($("<a>编辑</a>").attr("href", "javascript:tendog.win.photoEdit('"+photo.id+"')"))
	.append("&nbsp;")
	.append($("<a>删除照片</a>").attr("href", "javascript:deletePhoto('" + photo.id + "')"));
	$li.append($titleP);
}

//=============上传组件=================
//文件上传处理函数
var swfupload_img = {};
//文件选择成功
swfupload_img.fileQueuedHandler = function(file){
	var $li = $("<li></li>").attr("photoId", file.id).append($("<p>0%</p>").addClass("imgbox").addClass("uploading"));
	$li.append($("<p class='p_font'></p>").append($("<span>" + file.name + "</span>")).append("<br/>").append("<a href='javascript:deleteUploadingPhoto(\""+file.id+"\")'>删除</a>"));
	
	$("#photo_upload_li").before($li);
// 	$("#photo_list").append($li);
	//禁用按钮
	//this.setButtonDisabled(true);
	//开始上传
	this.startUpload();
};
//文件选择错误.
swfupload_img.fileQueueErrorHandler = function() {
	msg.error("文件选择出错! 可能超出文件最大限制.");
};
//上传过程
swfupload_img.uploadProgressHandler = function(file, complete, bytes) {
	$("#photo_list li[photoId='" + file.id + "'] p.uploading").html(parseInt((complete/bytes) * 100) + "%");
};
//上传成功
swfupload_img.uploadSuccessHandler = function(file, data) {
	//将字符串转换为json
	var retObj = tools.s2j(data);
	if(retObj.code==1){
		$("#photo_list li[photoId='" + file.id + "'] p.uploading").css("font-size", "14px").html("处理中...");
		var photo = {
					"photo.photoPath":retObj.attributes.fileName, 
					"photo.photoTitle":retObj.attributes.sourceName
				};
		$.post("${ctx}/photo/create.do", photo, function(res){
			if(res.code==1) {
				var $li = $("#photo_list li[photoId='" + file.id + "']").html("");
				getPhotoHtml($li, res.attributes.photo);
			} else {
				msg.error(res.msg);
				$("#photo_list li[photoId='" + file.id + "']").css("color","red").html("处理失败!");
			}
		}, "json");
	} else {
		msg.error(retObj.msg);
	}
	//继续上传下一张
	this.startUpload();
	//启用按钮
	//this.setButtonDisabled(false);
};
//
swfupload_img.uploadErrorHandler = function(msg) {
	msg.error("文件上传出错.");
	//启用按钮
	this.setButtonDisabled(false);
};

var swfu_obj;
function swfUploadInit() {
	var swfUploadSetting = {
		upload_url: "${ctx}/tools/upload.do",				//提交路径
		flash_url : "${ctx}/js/utils/swfupload/swfupload.swf",	//控件路径
		//use_query_string:true,//post_params以GET方式上传
		// File Upload Settings
		file_size_limit : "${fileSize} KB",	// 文件大小 B,KB,MB,GB
		file_types : "*.JPG;*.GIF;*.PNG",		//设置文件类型
		file_types_description : "Image",//显示在文件选择框的打开文件类型
		//file_upload_limit : 1,//允许上传文件数量
		button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,//允许HTML在它下面显示
		button_cursor: SWFUpload.CURSOR.HAND,
		button_action:SWFUpload.BUTTON_ACTION.SELECT_FILES,	//设置点击按钮打开单一文件选择对话框
		
		button_image_url : "${ctx}/images/photo_add2.jpg",
		button_placeholder_id: "frame_photo_upload_button",
		button_width: "216",
		button_height: "144",
		button_text : '',
//		button_text_style : '.button {color:#000;text-align: right;}',
// 		button_text_left_padding: 23,
// 		button_text_top_padding: 3,
		
		upload_success_handler:swfupload_img.uploadSuccessHandler,		//获取上传后返回信息
		upload_progress_handler:swfupload_img.uploadProgressHandler,	//设置上传时的状态信息
		upload_error_handler:swfupload_img.uploadErrorHandler,			//发生错误的回调函数
		file_queued_handler:swfupload_img.fileQueuedHandler,			//选择文件成功之后调用
		file_queue_error_handler:swfupload_img.fileQueueErrorHandler,					//选择文件错误之后调用
		// Debug Settings
		debug: false		//是否开启Degug信息
	};
	swfu_obj = new SWFUpload(swfUploadSetting);
}
$(function(){
	swfUploadInit();
	
	
	$("#photo_list img").imgAuto();
});

function deleteUploadingPhoto(id) {
	$("#photo_list li[photoId='" + id + "']").remove();
	swfu_obj.cancelUpload(id);
}
function deletePhoto(id) {
	msg.confirm("是否要删除该图片?",function(r){
		if(r) {
			$.getJSON("${ctx}/photo/del.do?id=" + id, function(res){
				if(res.code==1) {
					$("#photo_list li[photoId='" + id + "']").remove();
				} else {
					msg.error(res.msg);
				}
			});
		}
	});
}

function deletealbum(id) {
	msg.confirm("是否要删除该相册?",function(r){
		if(r) {
			$.getJSON("${ctx}/photo/delAlbum.do?id=" + id, function(res){
				if(res.code==1) {
					$("#album_list li[albumId='" + id + "']").remove();
				} else {
					msg.error(res.msg);
				}
			});
		}
	});
}
</script>
</html>